<template>
  <view class="container">
    <!-- Header with Search -->
    <view class="header">
      <text class="title">Digital Library</text>
      <view class="search-bar">
        <u-search
          v-model="searchQuery"
          placeholder="Search resources..."
          :show-action="false"
          @change="onSearch"
        ></u-search>
      </view>
      <view class="category-tabs">
        <scroll-view scroll-x class="tabs-scroll">
          <view class="tabs">
            <view 
              v-for="cat in categories" 
              :key="cat.id"
              :class="['tab', activeCategory === cat.id ? 'active' : '']"
              @click="activeCategory = cat.id"
            >
              {{ cat.name }}
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- Library Content -->
    <scroll-view scroll-y class="content">
      <view class="resources-grid">
        <view 
          v-for="resource in filteredResources" 
          :key="resource.id"
          class="resource-card"
          @click="openResource(resource)"
        >
          <view class="resource-icon">
            <u-icon 
              :name="getResourceIcon(resource.type)"
              size="40"
              :color="getResourceColor(resource.type)"
            ></u-icon>
          </view>
          <view class="resource-info">
            <text class="resource-name">{{ resource.name }}</text>
            <text class="resource-type">{{ resource.type }}</text>
            <text class="resource-meta">{{ resource.size }} • {{ resource.date }}</text>
          </view>
          <view class="resource-actions">
            <u-icon name="more-dot-fill" @click.stop="showActions(resource)"></u-icon>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- Floating Action Button -->
    <view class="fab">
      <u-button 
        type="primary" 
        shape="circle"
        icon="plus"
        @click="showUploadOptions"
      ></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      activeCategory: 'all',
      categories: [
        { id: 'all', name: 'All' },
        { id: 'documents', name: 'Documents' },
        { id: 'videos', name: 'Videos' },
        { id: 'audio', name: 'Audio' },
        { id: 'images', name: 'Images' },
        { id: 'others', name: 'Others' }
      ],
      resources: [
        {
          id: 1,
          name: 'Physics Notes Chapter 1',
          type: 'PDF',
          size: '2.4 MB',
          date: '2024-03-15',
          category: 'documents'
        },
        {
          id: 2,
          name: 'Chemistry Lab Recording',
          type: 'Video',
          size: '45 MB',
          date: '2024-03-14',
          category: 'videos'
        },
        {
          id: 3,
          name: 'Math Formula Sheet',
          type: 'Document',
          size: '1.2 MB',
          date: '2024-03-13',
          category: 'documents'
        }
      ]
    }
  },
  computed: {
    filteredResources() {
      let filtered = this.resources
      
      // Filter by category
      if (this.activeCategory !== 'all') {
        filtered = filtered.filter(r => r.category === this.activeCategory)
      }
      
      // Filter by search
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        filtered = filtered.filter(r => 
          r.name.toLowerCase().includes(query) ||
          r.type.toLowerCase().includes(query)
        )
      }
      
      return filtered
    }
  },
  methods: {
    onSearch() {
      // Implement search logic
    },
    getResourceIcon(type) {
      const icons = {
        'PDF': 'file-text',
        'Video': 'video',
        'Document': 'file',
        'Audio': 'headphone',
        'Image': 'image'
      }
      return icons[type] || 'file'
    },
    getResourceColor(type) {
      const colors = {
        'PDF': '#ff4757',
        'Video': '#2ed573',
        'Document': '#1e90ff',
        'Audio': '#ffa502',
        'Image': '#7bed9f'
      }
      return colors[type] || '#70a1ff'
    },
    openResource(resource) {
      uni.showToast({
        title: `Opening ${resource.name}`,
        icon: 'none'
      })
    },
    showActions(resource) {
      uni.showActionSheet({
        itemList: ['Download', 'Share', 'Delete'],
        success: (res) => {
          // Implement action handling
        }
      })
    },
    showUploadOptions() {
      uni.showActionSheet({
        itemList: ['Upload File', 'Create Folder', 'Scan Document'],
        success: (res) => {
          // Implement upload options
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  flex: 1;
  background-color: #f8f9fa;
}

.header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.search-bar {
  margin: 20rpx 0;
}

.category-tabs {
  margin-top: 20rpx;
}

.tabs-scroll {
  white-space: nowrap;
}

.tabs {
  display: flex;
  padding: 0 10rpx;
}

.tab {
  padding: 10rpx 30rpx;
  margin-right: 20rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #f0f0f0;
}

.tab.active {
  color: #fff;
  background-color: #4b7bec;
}

.content {
  flex: 1;
  padding-top: 20rpx;
}

.resources-grid {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.resource-card {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}

.resource-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.resource-info {
  flex: 1;
}

.resource-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 4rpx;
}

.resource-type {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 4rpx;
}

.resource-meta {
  font-size: 22rpx;
  color: #999;
}

.resource-actions {
  padding: 0 10rpx;
}

.fab {
  position: fixed;
  right: 30rpx;
  bottom: 30rpx;
}
</style> 